<template>
	<view>
		<view class="top1">
			<view :class="{item1:true,active:activeIndex==='1'}" @click="navageto('1')">
				首页
			</view>
			<view :class="{item1:true,active:activeIndex==='2'}" @click="navageto('2')">
				操作页
			</view>
			<view :class="{item1:true,active:activeIndex==='3'}" @click="navageto('3')">
				消息页
			</view>
			<view :class="{item1:true,active:activeIndex==='4'}" @click="navageto('4')">
				课程页
			</view>
		</view>
		<view class="main">

			<view class="tou12">
				<view class="t_12">
					<!-- <view class="item_head">
						HTML
					</view> -->
					<view style="height: 100%;">
						<view class="teitel2">
							大阶段：
							<el-select @change='chende' v-model="value" placeholder="请选择阶段">
								<el-option v-for="item in options" :key="item.label" :label="item.label"
									:value="item.label">
								</el-option>
							</el-select>
						</view>
					</view>
					<view style="height: 100%;">
						<view class="teitel2">
							阶段分类：
							<el-select @change='chende1' v-model="value1" placeholder="请选择阶段">
								<el-option v-for="item in options1" :key="item.videocate" :label="item.videocate"
									:value="item.videocate">
								</el-option>
							</el-select>
						</view>
					</view>
					<view class="" style="height: 100%;">
						<view class="teitel2">
							阶段课程：
							<!-- 课程 -->
							<el-select @change='chende2' v-model="value2" placeholder="请选择阶段">
								<el-option v-for="item in options2" :key="item.erjicate" :label="item.erjicate"
									:value="item.erjicate">
								</el-option>
							</el-select>
						</view>
					</view>
					<view class="" style="height: 100%;">
						<el-tooltip class="item" effect="dark" content="设为下次加载第一项" placement="bottom">
							<el-button @click="buncun" :disabled="disabled" type="primary">设为默认</el-button>
						</el-tooltip>
					</view>
				</view>
			</view>
			<view class="tou12" style="display: flex;justify-content: space-around;">
				<!-- <view style="font-size: 20px; font-weight: bold;margin-top: 20px;">
					今日安排
				</view> -->
				<view class="" style="width: 54%;">
					<view style="font-size: 20px; font-weight: bold;margin-top: 20px;text-align: center;">
						视频任务
					</view>
					<view class="" v-loading="loadding">
						<el-table stripe :data="classlist" style="width: 100%" height="620">
							<el-table-column prop="videotitle" label="标题">
							</el-table-column>
							<el-table-column prop="erjicate" label="分类" align='center'>
							</el-table-column>
							<el-table-column prop="videodate" label="时间" align='center'>
							</el-table-column>
							<el-table-column prop="videourl" label="视频链接" align='center'>
								<template slot-scope="scope">
									<el-button type="primary" size="mini" @click="openurl(scope.row)">查看</el-button>
								</template>
							</el-table-column>
							<el-table-column prop="videourl" label="完成" align='center'>
								<template slot-scope="scope">
									<el-popconfirm v-if="scope.row.isok.includes(userid)"
										@confirm="isokcli(scope.row,0)" title="确定重置该课程吗？">
										<el-tag slot="reference" type="success" v-if="scope.row.isok.includes(userid)">
											<i style="color:#67C23A" class="el-icon-success"></i>已完成
										</el-tag>
									</el-popconfirm>
									<el-button v-if="!scope.row.isok.includes(userid)" type="warning" size="mini"
										@click="isokcli(scope.row,1)">点击完成
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</view>
				</view>
				<view class="" style="width: 30%;">
					<view class="">
						<view style="font-size: 20px; font-weight: bold;margin-top: 20px;">
							课程进度
						</view>
						<span class="joe_lamp"></span>
						<view class="">
							<view style="padding: 10px 0px;">{{value2}}——进度</view>
							<el-progress text-inside :stroke-width="20" :percentage="percentage1"></el-progress>
						</view>
						<!-- <view class="">
							<view style="padding: 10px 0px;">{{value}}——进度</view>
							<el-progress text-inside :stroke-width="20" :percentage="percentage2"></el-progress>
						</view> -->
					</view>
					<view
						style="display: flex; width: 100%;padding-top: 20px;justify-content: space-between;align-items: center;">
						<view style="font-size: 20px; font-weight: bold;">
							阶段完成打卡
						</view>
						<el-button v-if="!ifdaka1" @click="okjieduan" size="small" :disabled="percentage1!=100"
							type="warning">打卡</el-button>
						<el-button v-if="ifdaka1" size="small" type="success">已打卡</el-button>
					</view>
					<view style="font-size: 20px; font-weight: bold;margin-top: 20px;">
						课程任务
					</view>
					<view class="coner3" v-html="textarea2">
					</view>
					<view style="font-size: 20px; font-weight: bold;margin-top: 20px;">
						课程作业
					</view>
					<el-alert title="请在操作页上传笔记或作业" type="warning" show-icon>
					</el-alert>
					<view class="" v-if="zuoye.length!==0" style="background-color: #f5f7fa;">
						<el-table :data="zuoye" style="width: 100%">
							<el-table-column label="内容" align='center' prop="namefile">
							</el-table-column>
							<el-table-column label="操作" align='center'>
								<template slot-scope="scope">
									<el-button type="warning" v-if="scope.row.type==='0'" size="mini"
										@click="xiazai(scope.row)">下载</el-button>
									<el-button type="warning" v-else size="mini"
										@click="show2=true;tandata=scope.row.urldata">查看
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</view>
				</view>
			</view>
		</view>
		<el-dialog title="链接信息" :visible.sync="show2" width="30%">
			<span style="-webkit-user-select:text">{{tandata}}</span>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="show2 = false">确 定</el-button>
			</span>
		</el-dialog>
	</view>
	</view>
</template>

<script>
	import ModlItem from '../../component/modluitem.vue'
	import IsLogin from '../../component/isLogiqita.vue'
	export default {
		components: {
			ModlItem,
			IsLogin
		},
		data() {
			return {
				dialogVisible: false,
				show2: false,
				disabled: false,
				disile: true,
				isokpro: 0,
				notokpro: 0,
				onekpro: 0,
				percentage1: 0,
				percentage2: 0,
				loadding: true,
				activeIndex: '4',
				options: [{
					label: '第一阶段'
				}, {
					label: '第二阶段'
				}, {
					label: '第三阶段'
				}],
				sqltext: '',
				value: '第一阶段',
				options1: [],
				value1: '',
				options2: [],
				value2: '',
				// 课程信息
				classlist: [],
				userid: '',
				userdata: {},
				textarea2: '',
				totalnum: 0,
				ifdaka1: false,
				zuoye: [],
				tandata: ''
			};
		},
		computed: {

		},
		onShow() {
			if (uni.getStorageSync('uni_id_token') && uni.getStorageSync('uni_id_token_expired')) {} else {
				this.dialogVisible = true
			}
		},
		onLoad() {
			console.log(11);
			if (uni.getStorageSync('userpro')) {
				this.userid = uni.getStorageSync('uni_id')
				this.userdata = uni.getStorageSync('userpro')
				this.value = this.userdata.jieduan
				this.value1 = this.userdata.fenlei
				this.value2 = this.userdata.kecheng
				this.setsql(this.userdata.jieduan)
				this.getcate(this.sqltext)
				this.chende1(this.userdata.fenlei)
				this.ifdaka()
				// this.getprototal(this.value1)
				// this.getonetotal(this.value2)
				this.getlist(this.userdata.kecheng)


			}
		},
		methods: {
			async getzuoye() {
				const db = uniCloud.database();
				let collection = db.collection('zuoyefile')
				let res = await collection.where({
					ercate: this.value2,
					ifcursezuoye: '1'
				}).get()
				console.log(res);
				if (res.result.code === 0) {
					this.zuoye = res.result.data
				}
			},
			queren() {
				this.dialogVisible = false
				uni.clearStorageSync();
				uni.reLaunch({
					url: '../../login/login'
				})
			},
			xiazai(data) {
				console.log(data);
				window.open(data.fileid)
			},
			handleEdit(data) {
				console.log(data);
			},
			async ifdaka() {
				const db = uniCloud.database();
				let collection = db.collection('isok_user')
				let res = await collection.where("erjicate=='" + this.value2 + "'").get()
				console.log(res);
				if (res.result.data.length !== 0) {
					this.ifdaka1 = true
				} else {
					this.ifdaka1 = false
				}
			},
			async okjieduan() {
				const db = uniCloud.database();
				let collection = db.collection('isok_user')
				let res = await collection.add({
					userid: this.userid,
					erjicate: this.value2,
					iflookall: 1,
				})
				console.log(res);
				if (res.result.code === 0) {
					this.ifdaka()
				}
			},
			async sergcontet() {
				const db = uniCloud.database();
				let collection = db.collection('contents')
				let res = await collection.where("okercate=='" + this.value2 + "'").get()
				if (res.result.affectedDocs != 0) {
					this.textarea2 = res.result.data[0].content
				} else {
					this.textarea2 = ''
				}
			},
			async buncun() {
				const db = uniCloud.database();
				let collection = db.collection("userclass")
				let res = await collection.where('userid=="' + this.userid + '"').update({
					jieduan: this.value,
					fenlei: this.value1,
					kecheng: this.value2,
				})
				if (res.result.code === 0) {
					this.$message.success('设置成功！')
				}
			},
			openurl(row) {
				console.log(row);
				// window.location.href = row.videourl
				window.open(row.videourl)
			},
			async isokcli(row, id) {
				this.loadding = true
				if (id === 0) {
					row.isok.splice(row.isok.findIndex(e => e === this.userid), 1)
				} else {
					row.isok.push(this.userid)
				}
				const db = uniCloud.database();
				let collection = db.collection(this.sqltext)
				let res = await collection.where('_id=="' + row._id + '"').update({
					isok: row.isok,
				})
				this.getlist(this.value2)
			},
			async update2() {
				const db = uniCloud.database();
				let collection = db.collection("hc_kec_list")
				let res = await collection.where("videocate=='屏幕适配vw、vh'").update({
					videocate: '7_屏幕适配vw、vh',
				})
			},
			setsql(val) {
				if (val === "第一阶段") {
					this.sqltext = 'hc_kec_list'
				} else if (val === "第二阶段") {
					this.sqltext = 'js_kec_list'
				} else if (val === "第三阶段") {
					this.sqltext = 'ajno_kec_list'
				}
			},
			navageto(id) {
				if (id === '2') {
					uni.switchTab({
						url: '/pages/home/upload/upload'
					});
				} else if (id === '1') {
					uni.switchTab({
						url: '/pages/home/home'
					});
				} else if (id === '3') {
					uni.switchTab({
						url: '/pages/home/message/message'
					});
				}
			},
			chende(val) {
				this.disabled = true
				if (val === "第一阶段") {
					this.sqltext = 'hc_kec_list'
					this.getcate(this.sqltext)
					this.value1 = ''
					this.value2 = ''
					this.options2 = []
				} else if (val === "第二阶段") {
					this.sqltext = 'js_kec_list'
					this.getcate(this.sqltext)
					this.value1 = ''
					this.value2 = ''
					this.options2 = []
				} else if (val === "第三阶段") {
					this.sqltext = 'ajno_kec_list'
					this.getcate(this.sqltext)
					this.value1 = ''
					this.value2 = ''
					this.options2 = []
				}
			},
			chende1(val) {
				this.disabled = true
				console.log(val);
				this.getclass(val)
			},
			chende2(val) {

				this.loadding = true
				console.log(val);
				this.getlist(val)
			},
			async getcate(val) {
				const db = uniCloud.database()
				let res = await db.collection(val).groupBy('videocate').orderBy('videocate').get()
				this.options1 = res.result.data
				console.log(this.options1);
			},
			async getclass(val) {
				const db = uniCloud.database()
				let res = await db.collection(this.sqltext).where('videocate=="' + val + '"').groupBy('erjicate')
					.orderBy('erjicate').get()
				this.options2 = res.result.data
				console.log(this.options2);
			},
			async getlist(val) {
				this.disabled = false
				this.getzuoye()
				this.sergcontet()
				this.ifdaka()
				const db = uniCloud.database()
				let res = await db.collection(this.sqltext).where('erjicate=="' + val + '"').orderBy('videosort').get()
				console.log(res);
				if (res.result.code === 0) {
					this.totalnum = res.result.data.length
					this.loadding = false
					this.classlist = res.result.data
					// this.percentage2=parseInt((this.isokpro*100/this.onekpro).toFixed(0))
					// this.percentage1=parseInt((this.isokpro*100/this.notokpro).toFixed(0))
					this.getprocess()
				}


			},
			getprocess(val) {
				this.isokpro = 0
				this.classlist.forEach(item => {
					if (item.isok.includes(this.userid)) {
						this.isokpro++
					}
				})
				this.percentage1 = parseInt((this.isokpro * 100 / this.totalnum).toFixed(0))
				// const db = uniCloud.database()
				// db.collection(this.sqltext).where('videocate=="' + this.value1 + '"').count().then(res => {
				// 	this.notokpro = res.result.total
				// 	db.collection(this.sqltext).count().then(res1 => {
				// 		this.onekpro = res1.result.total
				// 		// this.percentage2 = parseInt((this.isokpro * 100 / this.onekpro).toFixed(0))
				// 		// this.percentage1=parseInt((this.isokpro*100/this.notokpro).toFixed(0))
				// 	})
				// })
			},
			async getprototal(val) {
				const db = uniCloud.database()
				let res = await db.collection(this.sqltext).where('videocate=="' + val + '"').count()
				if (res.result.code === 0) {
					this.notokpro = res.result.total
					console.log(this.notokpro);
				}

			},
			async getonetotal(val) {
				const db = uniCloud.database()
				let res = await db.collection(this.sqltext).count()
				if (res.result.code === 0) {
					this.onekpro = res.result.total
					console.log(this.onekpro);
				}

			},
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.top1 {
		width: 100%;
		height: 60px;
		background-color: #545c64;
		display: flex;
		padding-bottom: 3px;
		padding: 0px 100px;
	}

	.item1 {
		width: 70px;
		height: 60px;
		text-align: center;
		line-height: 60px;
		color: #fff;
		margin-right: 20px;
		cursor: pointer;
	}

	.active {
		color: #ffd04b;
		border-bottom: 3px solid #ffd04b;
	}

	.main {
		padding: 20px 100px;
		width: 100%;
		background-color: #fff;
	}

	body {
		perspective: 500px;
	}

	.tou12 {
		display: flex;
		justify-content: space-between;
	}

	.t_12 {
		width: 100%;
		height: 60px;
		background-color: #fff;
		position: relative;
		margin: auto;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
	}

	.you12 {
		width: 60%;
		text-align: center;
	}

	.zuo21 {
		width: 30%;
	}

	.t_34 {
		width: 30%;
		height: 160px;
		line-height: 160px;
		background-color: #fff;
	}

	.item_head {
		position: absolute;
		top: -5px;
		left: -10px;
		margin: auto;
		font-size: 30px;
		transform-style: preserve-3d;
		transition: all 2s;
		text-align: center;
		width: 150px;
		height: 150px;
		line-height: 150px;
		background-color: #ff557f;
		border-radius: 50%;
		color: #fff;
		box-shadow: 1px 2px 4px 1px rgba(0, 0, 0, 0.4);
	}

	.item_head:hover {
		transform: translateY(-10px) rotateY(360deg);
	}

	.item_body {
		margin: auto;
		width: 50vw;
		background-color: #f4f4f4;
		margin-top: 35px;
		overflow: hidden;
		overflow: auto;
	}

	.mt2 {
		height: 150px;
		width: 70%;
		display: flex;
		overflow: hidden;
		overflow-x: auto;
	}

	.clearfloat:after {
		display: block;
		clear: both;
		content: "";
		visibility: hidden;
		height: 0
	}

	.clearfloat {
		zoom: 1
	}

	.box {
		display: inline-block;
		position: relative;
		width: 158px;
		height: 60px;
		transform-style: preserve-3d;
		transition: all .4s;
		margin: 1.5vw 10px;
	}

	.box:hover {
		transform: rotateX(90deg);
	}

	.front,
	.bottom {
		font-size: 18px;
		text-align: center;
		line-height: 60px;
		color: #fff;
	}

	.front {

		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #00ae9d;
		/* transform: rotateX(90deg) translateY(20px); */
		transform: translateY(30px) rotateX(-90deg);
	}

	.bottom {

		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #78cdd1;
		transform: translateZ(30px);
	}

	.t_34 {
		background-color: #f4f4f4;
		text-align: center;
	}

	.bunok {
		margin: auto;
		width: 200px;
		height: 100px;
		line-height: 100px;
		background-color: #35deff;
		color: #fff;
	}

	.teitel2 {
		font-weight: bold;
		font-size: 20px;
	}

	/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
	::-webkit-scrollbar {
		width: 5px;
		height: 5px;
		background-color: #fff;
	}

	/*定义滚动条轨道 内阴影+圆角*/
	::-webkit-scrollbar-track {
		// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		background-color: #fff;
	}

	/*定义滑块 内阴影+圆角*/
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		// -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
		background-image: linear-gradient(to top, #5ee7df 0%, #b490ca 100%);
	}

	.coner3 {
		padding: 1vw 0;
		width: 100%;

	}
</style>
